* {
box-sizing: border-box;
}
body {
background-color: #111;
display: grid;
place-items: center;
height: 100vh;
}
.loader {
width: 60px;
height: 60px;
display: inline-block;
position: relative;
background: radial-gradient(ellipse at center, #fff 69%, rgba(0, 0, 0, 0) 70%),
linear-gradient(to right,
rgba(0, 0, 0, 0) 47%,
#fff 48%,
#fff 52%,
rgba(0, 0, 0, 0) 53%);
background-size: 20px 20px, 20px auto;
background-repeat: repeat-x;
background-position: center bottom, center -5px;
}
.loader::before,
.loader::after {
content: "";
position: absolute;
left: -20px;
top: 0;
width: 20px;
height: 60px;
background: radial-gradient(ellipse at center, #fff 69%, rgba(0, 0, 0, 0) 70%),
linear-gradient(to right,
rgba(0, 0, 0, 0) 47%,
#fff 48%,
#fff 52%,
rgba(0, 0, 0, 0) 53%);
background-size: 20px 20px, 20px auto;
background-repeat: no-repeat;
background-position: center bottom, center -5px;
transform: rotate(0deg);
transform-origin: 50% 0%;
animation: move-left 1s linear infinite alternate;
}
.loader::after {
animation: move-right 1s linear infinite alternate;
left: 100%;
}
@keyframes move-left {
0% {
transform: rotate(22deg);
}
50% {
transform: rotate(0deg);
}
}
@keyframes move-right {
0%,
55% {
transform: rotate(0deg);
}
100% {
transform: rotate(-22deg);
}
}